import { createElement, render, renderDom } from './element'
import diff from './diff'
import patch from './patch'

// 生成VDOM
let virtualDom = createElement('div', { class: 'container' }, [
  createElement('li', { class: 'item' }, ['a']),
  createElement('li', { class: 'item' }, ['b']),
  createElement('li', { class: 'item' }, ['c'])
])
console.log(virtualDom)

// 生成DOM对象
let el = render(virtualDom)
console.log(el)

// 渲染DOM对象
renderDom(el, document.getElementById('root'))

let virtualDom1 = createElement('div', { class: 'container1' }, [
  createElement('li', { class: 'item' }, ['1']),
  createElement('li', { class: 'item' }, ['b']),
  createElement('li', { class: 'item' }, ['2'])
])
// diff 获取补丁
let patches = diff(virtualDom, virtualDom1)
console.log(patches)

// 把补丁加到DOM对象当中
patch(el, patches)
